<script setup lang="ts">
import { usePlayerStore } from '../stores/player'
import { storeToRefs } from "pinia"
import { ref, onMounted, nextTick, defineProps, defineEmits } from 'vue'
import PlayControl from '../components/PlayControl.vue'
const props = defineProps({
    currentTime: Number,
    duration: Number,

})
const showFull = ref(false)
const playerStore = usePlayerStore()
const { songObj, isPlay, isShow } = storeToRefs(playerStore)
const emit = defineEmits(['setclosemusic', 'setplaystate', 'setaudiocurrenttime'])
onMounted(async () => {
    
})

// 关闭音乐和隐藏小球的方法传给父组件
const onCloseMusic = () => {
    emit('setclosemusic')

}

// 点击显示全屏音乐控制器
const showFullScreen = () => {
    showFull.value = true
}
// 点击退出全屏音乐控制器
const onCloseShowFull = (isTrue: boolean) => {
    showFull.value = isTrue
}

const onChangePlayState = () => {
    emit('setplaystate')

}
const onChangeCurrentTime = (val: number) => {
    emit('setaudiocurrenttime', val)

}
</script>

<template>
    <div class="ball-container" @click="showFullScreen">
        <div class="rotate" :style="{ animationPlayState: isPlay ? 'running' : 'paused' }">
            <!-- <img :src="songObj?.al.picUrl"> -->
            <van-image round lazy-load :src="songObj?.al.picUrl" />
        </div>
        <div class="cross" @click.stop="onCloseMusic">
            <van-icon name="cross" />
        </div>
    </div>
    <div class="fullscreen" v-show="showFull">
        <PlayControl @set-full-screen="onCloseShowFull" @set-play-state="onChangePlayState"
            @set-audio-currentTime="onChangeCurrentTime" :currentTime="props.currentTime" :duration="props.duration"></PlayControl>
    </div>
</template>

<style lang="scss">
@keyframes rotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.ball-container {
    position: absolute;
    top: 70%;
    right: 0;
    padding: 5px;
    width: 80px;
    height: 50px;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 20;

    .rotate {
        position: absolute;
        // top: 50%;
        // left: 50%;
        width: 40px;
        height: 40px;
        background-image: url(@/assets/imgs/rotate.png);
        background-repeat: no-repeat;
        background-size: cover;
        // transform: translate(-50%, -50%);
        border-radius: 999px;
        overflow: hidden;
        // transform-origin: center;
        animation: rotate 5s linear infinite;


        .van-image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 25px;
            height: 25px;
            transform: translate(-50%, -50%);
            overflow: hidden;

            img {
                border-radius: 999px;

            }

        }
    }

    .cross {
        position: absolute;
        top: 50%;
        left: 65%;
        transform: translateY(-50%);

    }

}

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #37373f;
    z-index: 999;
}
</style>